<template>
<!--  <button @click="hello()">点击调用iframe中的方法</button>-->
  <div v-loading="loading" :style="'height:' + height">
    <iframe ref="iframe" id="_iframe"
        :src="srcUrl"
        frameborder="no"
        style="width: 100%; height: 100%"
        scrolling="auto"
    />
  </div>
</template>

<script setup name="IMaps">
import {getEncryptUsername} from "@/api/warn/apiMonitor";

const { proxy } = getCurrentInstance();

const loading = ref(true);
const uid = ref("")
const height= ref(document.documentElement.clientHeight - 94.5 + "px;")
// const srcUrl = ref("http://192.168.0.43:1024/page/test/monitorMapTest")
const srcUrl = ref(import.meta.env.VITE_LEAK_STRAIN_MAPS_API + "/page/maps/monitorMap")

function getUsername(){
  getEncryptUsername().then(resp => {
    // console.log('resp')
    // console.log(resp)
    uid.value = resp.data.value
    initSrcUrl()
  })
}

function initSrcUrl(){
  // console.log(uid)
  if (uid && uid.value ) {
    srcUrl.value = srcUrl.value + "?uid=" + encodeURIComponent(uid.value)
    // console.log(`iframeUrl:${srcUrl.value}`)
  }
}

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 300);

  // console.log(import.meta.env.VITE_APP_BASE_API)
  // console.log(import.meta.env.VITE_LEAK_STRAIN_MAPS_API)

  getUsername()
  // initSrcUrl()
  let that =
  window.addEventListener ('message', function(event) {
    console.log(event)
    let eventData = event.data
    if (eventData) {
      if (eventData.id=='section'){
        world()
      }
    }
  });
})
</script>

<style lang="scss" scoped>
.iframe-container {
  width: 100%;
  height: 100%;
}
</style>
